<!-- UserComment.vue -->
<template>
  <view class="user-comment">
	<view class="userbox">
		<image :src="comment.userImg" class="user-avatar" mode="aspectFill"></image>
		<view class="user-name">{{ comment.userName }}</view>
	</view>
    <view class="comment-text">{{ comment.commentText }}</view>
  </view>
</template>

<script lang="ts" setup>
import { watchEffect, toRefs } from 'vue';

const props = defineProps({
  comment:{
	  type:Object,
	  default:{
		  userImg:'/common/Otherimages/u1.jpg',
		  userName:"是李狗狗啊",
		  commentText:"sdfasdfasdf"
	  }
  }
})

const { comment } = toRefs(props);

watchEffect(() => {
  console.log(comment.value);
})
</script>


<style lang="scss" scoped>
.user-comment {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1rpx solid pink ;
  // 添加其他样式
  // 头像
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
}



.user-name {
  font-weight: bold;
}

.comment-text {
}
</style>